<template>
  <div>
    <el-row>
      <el-col :span="17">
        <div style="box-sizing:border-box;height: 6vh;padding: 0 20px;">
          <my-search-form :formFields="searchFields" @search="handleSearch"></my-search-form>
        </div>
        <my-divider>
          {{tableTitle}}
          <my-divider direction="vertical"></my-divider>
          <el-button type="text" size="small" @click="handleCreate">新增</el-button>
        </my-divider>
        <div style="clear: both;"></div>
        <div style="height: 73vh;overflow-y: auto" >
          <ul v-loading="noteLoading"
              v-infinite-scroll="handleScroll">
            <li v-for="(item,i) in dataList" :key="i">
              <my-note-card
                :key="i"
                class="cards"
                @edit="handleEdit(item)"
                @delete="handleDelete(item.id,i)">
                <el-alert
                  :title="item.createTime"
                  :type="renderType(item.type)"
                  :closable="false">
                  {{item.content}}
                </el-alert>
              </my-note-card>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="7">
        <div ref="myChart" style="height: 35vh;"></div>
        <div style="height: 45vh;">
          <my-calendar :render="renderDate" v-model="date" height="40px" @dayClick="dayClick"></my-calendar>
        </div>
      </el-col>
    </el-row>
    <transition name="el-zoom-in-center">
      <my-dialog
        :loading="saveLoading"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        :title="dialogTitle"
        destroy-on-close
        @save="saveEntity"
        @close="handleClose">
        <my-edit-form v-if="dialogVisible" :formFields="editFields" :data="editData" ref="editForm"></my-edit-form>
      </my-dialog>
      <my-dialog
        :showFooter="false"
        v-if="detailVisible"
        title="详情"
        destroy-on-close
        :visible.sync="detailVisible">
        <my-note-card
          v-for="(item,i) in detailList"
          :key="i"
          class="cards"
          :operation="false">
          <el-alert
            :title="item.createTime"
            :type="renderType(item.type)"
            :closable="false">
            {{item.content}}
          </el-alert>
        </my-note-card>
      </my-dialog>
    </transition>
  </div>
</template>

<script>
  let Echarts = require('echarts'); //基础实例 注意不要使用import
  export default {
    name: "note-index",
    data(){
      return{
        tableTitle: '笔记列表',
        dialogTitle: '新增',
        searchFields: [
          {
            type: 'input',
            label: '内容',
            prop: 'content'
          },{
            type: 'select',
            label: '类型',
            prop: 'type',
            dict: 'EL_TYPE_DICT'
          }
        ],
        searchParam: {},
        editFields: [
          {
            type: 'radio',
            label: '类型',
            prop: 'type',
            dict: 'EL_TYPE_DICT',
            rules:{ required: true, message: '类型不能为空', trigger: 'blur' }
          },{
            type: 'textarea',
            label: '内容',
            prop: 'content',
            rules:{ required: true, message: '内容不能为空', trigger: 'blur' }
          }
        ],
        editData: {},
        dataList: [],
        dialogVisible: false,
        saveLoading: false,
        pageSize: 20,
        noteLoading: false,
        noMore: false,
        types: [],
        echartData: [],
        date: new Date(),
        month: new Date().getMonth() + 1,
        dateMap: [],
        detailVisible: false,
        detailList: [],
      }
    },
    methods:{
      /** 初始化加载 **/
      loadData(){
        this.noteLoading = true;
        this.noMore = false;
        this.$ajax.getNoteList({...this.searchParam,pageSize: this.pageSize}).then(res=>{
          this.dataList = res;
        }).finally(()=>{
          this.noteLoading = false;
        })
      },
      /** 滚动加载 **/
      handleScroll(){
        if(!this.noMore){
          this.pageSize += 5;
          this.$ajax.getMoreNote({...this.searchParam,pageSize: this.pageSize}).then(res=>{
            if(res && res.length>0){
              res.forEach(item=>{
                this.dataList.push(item)
              })
            }else{
              this.noMore = true;
            }
          });
        }
      },
      /** 查询按钮点击 **/
      handleSearch(val){
        this.pageSize = 20;
        this.searchParam = val;
        this.loadData();
      },
      /** 新增按钮点击事件 **/
      handleCreate(){
        this.editData = {};
        this.dialogTitle = '新增';
        this.dialogVisible = true;
      },
      /** 关闭dialog **/
      handleClose(){
        this.dialogVisible = false;
      },
      /** 保存按钮点击 **/
      saveEntity(){
        this.saveLoading = true;
        this.$refs.editForm.validate((res)=>{
          if(res){
            this.$ajax.saveNote(res).then(r=>{
              if(this.dialogTitle === '编辑'){
                this.$message.success('编辑成功');
              }else {
                this.$message.success('新增成功');
              }
              this.handleClose();
              this.loadData();
              this.getDateMap();
              this.$ajax.getEchartData().then(res=>{
                this.echartData = res;
                this.echartInit();
              })
            }).finally(()=>{
              this.saveLoading = false;
            })
          }else{
            this.saveLoading = false;
            return;
          }
        });
      },
      /** 删除 **/
      handleDelete(id,i){
        this.$ajax.deleteNote(id).then(()=>{
          this.dataList.splice(i,1);
        })
      },
      /** 编辑 **/
      handleEdit(item){
        this.editData = item;
        this.dialogTitle = '编辑';
        this.dialogVisible = true;
      },
      /** 格式化类型 **/
      renderType(type){
        for(let item of this.types){
          if(item.value === type){
            return item.label;
          }
        }
      },
      /** 判定日期是否有日志记录 **/
      renderDate(date){
        for(let m of this.dateMap){
          if(new Date(m.label).getFullYear() == new Date(date).getFullYear() && new Date(m.label).getMonth() == new Date(date).getMonth() && new Date(m.label).getDate() == new Date(date).getDate()){
            return true;
          }
        }
      },
      /** 日历日期双击 **/
      dayClick(date){
        this.detailList = [];
        this.$ajax.getNoteByDate(date).then(res=>{
          if(res && res.length>0){
            this.detailList = res;
            this.detailVisible = true;
          }else{
            this.$notify({
              title: '提示',
              message: '当前日期未查询到笔记',
              type: 'info'
            });
          }
        })
      },
      /** 获取字典 **/
      getDict(){
        this.$ajax.getDict('EL_TYPE_DICT').then(res=>{
          this.types = res;
        })
      },
      /** 获取笔记月统计 **/
      getDateMap(){
        let p = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
        this.$ajax.getDateMap(p).then(res=>{
          this.dateMap = res;
        })
      },
      /** 初始化echarts **/
      echartInit(){
        let chart = Echarts.init(this.$refs.myChart);
        let option = {
          color:['#67C23A','#909399','#F56C6C', '#E6A23C'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '30天内统计',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.echartData
            }
          ]
        };
        chart.setOption(option);
      }
    },
    created(){
      /** 获取el type字典 **/
      this.getDict();
      /** 获取笔记月统计 **/
      this.getDateMap();
    },
    mounted() {
      /** 获取echart数据 **/
      this.$ajax.getEchartData().then(res=>{
        this.echartData = res;
        this.echartInit();
      })
      this.loadData();
    },
    watch:{
      date(o){
        this.month = new Date(o).getMonth() + 1;
      },
      month(o){
        this.$ajax.getDateMap(this.date).then(res=>{
          this.dateMap = res;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul li{
    list-style: none;
  }
  .cards{
    box-sizing: border-box;
    margin: 2px 0;
  }
  ::v-deep .el-calendar-day{
    height: 40px;
    padding: 0;
  }
</style>
